<div class="content__title">
    <h1>
        账号管理
    </h1>
</div>
<form nz-form [formGroup]="form">
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>用户名</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="username" name="'username'"></nz-input>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>姓名</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="name" name="'name'"></nz-input>
        </div>
    </div>
    <div nz-form-item nz-row *ngIf="!showType">
        <div nz-form-label nz-col [nzSpan]="3">
            <label>登录密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="password" name="'password'" [nzType]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入密码!</div>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>确认密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="checkPassword" name="'checkPassword'" [nzType]="'password'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请确认密码!</div>
            <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次密码不一致!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>职位</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="position" name="'position'"></nz-input>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>手机</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="mobile" name="'mobile'"></nz-input>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
            <label>微信</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="weixin" name="'weixin'"></nz-input>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
            <label for="bankname">QQ</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="qq" name="'qq'"></nz-input>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
            <label for="bankaccount">Skype</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="skype" name="'skype'"></nz-input>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
            <label for="userRestriction1">电子邮箱</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="email" name="'email'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">请输入正确的邮箱地址!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
            <label for="userRestriction2">状态</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <nz-select formControlName="statue" name="statue" [nzPlaceHolder]="' '" nzAllowClear>
                <nz-option *ngFor="let option of statueOptions" [nzLabel]="option.label" [nzValue]="option.value">
                </nz-option>
            </nz-select>
        </div>
        <div nz-col [nzSpan]="3" nzHasFeedback>
        </div>
        <div nz-col [nzSpan]="3" nzHasFeedback>
            <label nz-checkbox formControlName="isQuesstion" name="isQuesstion" >
                <span>允许提问</span>
            </label>
        </div>
        <div nz-col [nzSpan]="3" nzHasFeedback>
            <label nz-checkbox formControlName="isConfirm" name="isConfirm" >
                <span>允许审核</span>
            </label>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-col [nzSpan]="3" nzHasFeedback>
        </div>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="cancelFn()">
            关闭
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="ok()">
            提交
        </button>
    </div>
</form>
